<!-- 学习组item组件 -->

<template>
	<view>
		
		<!-- =================================================== 实占层 -->
		<!-- 组件外层占位容器 -->
		<focus-box width="702" mode="col" bg="white" radius="12">
			
			<!-- 文字内容区域 -->
			<focus-box width="702" :padding="[34,32]" mode="col" justify="start" align="stretch"
			@click="cardClick">
				
				<!-- 标题名称 -->
				<focus-box mode="row" justify="start" align="center">
					<!-- 标题文字 -->
					<focus-text size="30" color="content" weight="bold" lines="1" :text="name"></focus-text>
					<!-- 中间间隔 -->
					<focus-box width="16" height="20"></focus-box>
					<!-- 状态标签 -->
					<focus-box width="150">
						<u-tag v-if="is_check==0" type="warning" size="mini" text="待审核"></u-tag>
						<u-tag v-else-if="is_check==2" type="error" size="mini" text="审核未通过"></u-tag>
						<u-tag v-else-if="is_check==1&&state==1" type="success" size="mini" text="学习中"></u-tag>
						<u-tag v-else-if="is_check==1&&state==2" type="success" size="mini" text="学习已结束"></u-tag>
					</focus-box>
				</focus-box>
				
				<!-- 学习人数 -->
				<focus-box width="10" height="20"></focus-box>
				<focus-text size="26" color="info" :text="'学习人数：'+people+'人'"></focus-text>
				
				<!-- 创建时间 -->
				<focus-box width="10" height="20"></focus-box>
				<focus-text size="26" color="info" :text="'创建时间：'+time"></focus-text>
				
			</focus-box>
			
			<!-- 功能按钮区域 -->
			<focus-box v-if="isallow&&state==1" width="702" mode="col">
				<!-- 间隔线 -->
				<focus-line length="702" color="info-light"></focus-line>
				<!-- 按钮容器 -->
				<focus-box width="702" height="90" mode="row" justify="center" align="start">
					
					<!-- 二维码按钮 -->
					<focus-box width="348" height="90" mode="row" justify="center" align="center"
					@click="QrCodeClick">
						<!-- 图标 -->
						<image style="width:34rpx; height:34rpx; margin-top: 10rpx;" src="@/pagesB/static/img/collective/QrCode.png"></image>
						<!-- 文字间隔 -->
						<focus-box width="10" height="10"></focus-box>
						<!-- 按钮文字 -->
						<focus-text size="24" color="primary" text="加入学习二维码"></focus-text>
					</focus-box>
					
					<!-- 中间间隔线 -->
					<focus-line direction="col" length="90" color="info-light"></focus-line>
					
					<!-- 结束按钮 -->
					<focus-box width="348" height="90" mode="row" justify="center" align="center"
					@click="closeStudyClick">
						<!-- 图标 -->
						<image style="width:34rpx; height:34rpx; margin-top: 10rpx;" src="@/pagesB/static/img/collective/end.png"></image>
						<!-- 文字间隔 -->
						<focus-box width="10" height="10"></focus-box>
						<!-- 按钮文字 -->
						<focus-text size="24" color="primary" text="结束学习"></focus-text>
					</focus-box>
					
				</focus-box>
			</focus-box>
			
		</focus-box>
		
		<!-- 底部间隔 -->
		<focus-box width="100" height="20"></focus-box>
		
		
		<!-- =================================================== 弹出层 -->
		<!-- 通用信息模态框 -->
		<modal-info ref="myModalInfoDjy"
			mode="warning"
			title="结束课程确定"
			content="一旦结束此课程，你的组员将接收不到你的学习课程！"
			cancelText="取消"
			confirmText="确定"
			@confirm="onConfirmCall"
		></modal-info>
		
		<!-- 二维码弹出框 -->
		<!-- type="center" :maskClick="false" -->
		<u-popup :show="myUniPopupDjy" mode="center" :customStyle="{ padding: '50rpx' }" :round="20">
			<!-- 白底容器 -->
			<focus-box width="600" height="660" mode="col" justify="center" align="center"
			bg="white" radius="15" position="relative">
				
				<!-- 文字 -->
				<focus-text size="32" color="content" text="扫码加入学习组"></focus-text>
				
				<!-- 中间间隔 -->
				<focus-box width="100" height="45"></focus-box>
				
				<!-- 二维码图片 -->
				<image style="width:370rpx; height:370rpx;" :src="QrCode.img"></image>
				
				<!-- 右上角关闭按钮 -->
				<focus-box width="88" height="88" mode="col" justify="center" align="center"
				position="absolute" right="0" top="0" @click="QrCodeClose">
					<!-- 关闭图片 -->
					<image style="width:32rpx; height:32rpx;" src="@/pagesB/static/img/collective/close.png"></image>
				</focus-box>
			</focus-box>
		</u-popup>
	</view>
</template>

<script>
	// 接口文件引入
	import request from '@/pagesB/common/js/request/learning.js';
	import modalInfo from '@/pagesB/components/modal-info/modal-info.vue'
	
	/**
	 * 学习组item组件
	 * @description 学习组item组件，杜先生开发
	 * @property {String} tag 组件标识，默认：group-item
	 * @property {String,Number} groupid 学习组id
	 * @property {String} name 组名称
	 * @property {String,Number} state =[1|2|3] 组状态，默认：0
	 *   @value 1 学习中
	 *   @value 2 已结束
	 *   @value 3 审核不通过
	 * @property {String,Number} people 组员人数
	 * @property {String} time 创建时间
	 * @property {Boolean} isallow 是否拥有创建许可
	 * @event {Function()} closestudy 结束学习了
	 */
	export default {
		name: 'group-item',
		props: {
			tag: { type: String, default: 'group-item' },
			groupid: { type: [String,Number], default: 0 },
			name: { type: String, default: '' },
			state: { type: [String,Number], default: 0 },
			people: { type: [String,Number], default: 0 },
			time: { type: String, default: '' },
			isallow: { type: Boolean, default: false },
			is_check:{type:Number,default:0}
		},
		components: {
			modalInfo
		},
		
		// 页面数据
		data() {
			return {
				// 系统信息
				sys: {},
				myUniPopupDjy: false,
				// 二维码图片信息
				QrCode: {
					img: '', // 图片src属性
				},
			}
		},
		
		// 实例挂载完毕
		mounted() {
			// 获取系统信息
			uni.$focus.systemInfo((sysD)=>{ this.sys = sysD; });
		},
		
		// 页面事件
		methods: {
			
			// ========================================= 元素事件
			// 学习组卡片 点击
			cardClick() {
				// 跳转到学习组详情页
				uni.$focus.pageJump('/pages/learning/details/index', {
					groupId: this.groupid, // 学习组id
				});
			},
			
			// 二维码按钮 点击
			QrCodeClick() {
				// 获取学习组二维码
				this.QrCodeForGroupReq();
			},
			// 右上角关闭按钮 点击
			QrCodeClose() {
				// 关闭二维码图片框
				// this.$refs.myUniPopupDjy.close();
				this.myUniPopupDjy = false;
			},
			
			// 结束学习按钮 点击
			closeStudyClick() {
				// 弹出模态提示框
				this.$refs.myModalInfoDjy.open();
				// this.myModalInfoDjy = true;
			},
			// 模态框确定按钮 点击
			onConfirmCall() {
				// 调用结束学习请求
				this.endLearningReq();
			},
			
			
			// ========================================= 接口请求
			// 获取学习组二维码
			QrCodeForGroupReq() {
				request.QrCodeForGroup({
					urlData: {
						id: this.groupid
					},
					success: (res) => {
						// console.log('===== 获取学习组二维码：', res);
						// 二维码图片属性 赋值
						this.QrCode.img = res.info.img;
						// 弹出二维码图片框
						// this.$refs.myUniPopupDjy.open();
						this.myUniPopupDjy = true;
					},
				});
			},
			
			// 结束学习
			endLearningReq() {
				request.endLearning({
					urlData: {
						id: this.groupid
					},
					success: (res) => {
						this.$emit('closestudy', { tag: this.tag });
					},
				});
			},
			
		},
		
	}
</script>